<template>
	<view class="join-records-container">
		<!-- 记录列表 -->
			<view class="records-scroll">
				<view class="records-list">
					<view
						v-for="(record, index) in pageData.data"
						:key="record.id || index"
						class="record-card"
						@click="viewRecordDetail(record)"
					>
						<!-- 活动封面 -->
						<view class="record-cover">
							<image
								:src="record.shopLog || '/static/logo.png'"
								mode="aspectFill"
								class="cover-image"
							></image>
							<view class="cover-overlay">
								<view class="price-tag">
									<text class="price-symbol">¥</text>
									<text class="price-value">{{ record.fee}}</text>
								</view>
							</view>
						</view>

						<!-- 活动信息 -->
						<view class="record-content">
							<view class="content-header">
								<text class="activity-title">{{ record.title }}</text>
								<view class="organizer-info">
									<text class="organizer-label">主理人 {{record.userName}}</text>
									<view class="organizer-avatars">
										<image
											v-for="(item, idx) in (record.joins)"
											:key="idx"
											:src="item.avatar"
											class="organizer-avatar"
											mode="aspectFill"
										></image>
									</view>
								</view>
							</view>

							<view class="activity-meta">
								<view class="meta-row">
									<view class="meta-item">
										<text class="meta-icon">📅</text>
										<text class="meta-text">{{record.beginDate}}</text>
									</view>
									<view class="participant-count">
										<text class="count-text">{{ record.fee || 0 }}/位</text>
									</view>
								</view>

								<view class="meta-row">
									<view class="meta-item">
										<text class="meta-icon">📍</text>
										<text class="meta-text">{{ record.shopAddress || '待定' }}</text>
									</view>
									<view class="time-info">
										<text class="time-text"> </text>
									</view>
								</view>
							</view>

							<view class="record-footer">
								<view class="join-info">
									<text class="join-label">报名时间：</text>
									<text class="join-time">{{ record.addDate}}</text>
								</view>
								<view class="action-buttons">
									<button
										v-if="record.status === 'approved'"
										class="action-btn detail-btn"
										@click.stop="viewDetail(record)"
									>
										查看详情
									</button>
								</view>
							</view>
						</view>
					</view>

					<!-- 空状态 -->
					<view v-if="pageData.data.length === 0 && !loading" class="empty-state">
						<image src="/static/logo.png" class="empty-icon" mode="aspectFit"></image>
						<text class="empty-text">暂无报名记录</text>
						<text class="empty-tip">快去参与一些有趣的活动吧！</text>
					</view>

					<!-- 加载状态 -->
					<view v-if="status==='loading'" class="loading-state">
						<view class="loading-spinner"></view>
						<text class="loading-text">加载中...</text>
					</view>

					<!-- 没有更多 -->
					<view v-if="status==='noMore'" class="no-more">
						<view class="no-more-line"></view>
						<text class="no-more-text">已显示全部记录</text>
						<view class="no-more-line"></view>
					</view>
				</view>
			</view>

	</view>
</template>

<script setup>
import {usePageData} from "../../common/usePageData";
import {ref} from 'vue'

const searchObject = ref({
  catalog: null,
  page: 1,
  size: 10,
  beginDate:null,
  endDate:null
})

const { pageData, status, searchList, search, loading, loadMore } = usePageData("my_join_topic_list", searchObject)

// 响应式数据


const viewRecordDetail = (record) => {
	uni.navigateTo({
		url: `/pages/topic/index?id=${record.topic}&shopJoin=2`
	})
}

const viewDetail = (record) => {
	viewRecordDetail(record)
}


</script>

<style scoped>
.join-records-container {
	min-height: 100vh;
	position: relative;
}


.filter-tab.active .filter-text {
	color: #667eea;
	font-weight: 600;
}

.filter-tab.active .filter-count {
	color: #667eea;
	background: rgba(102, 126, 234, 0.1);
}





/* 记录区域样式 */
.records-section {
	flex: 1;
	display: flex;
	flex-direction: column;
	position: relative;
	z-index: 10;
}




.records-scroll {
	flex: 1;
	overflow-y: auto;
  padding-top: 20rpx;
}

.records-list {
	padding: 0 30rpx 30rpx;
}

/* 记录卡片样式 */
.record-card {
	background: #fff;
	border-radius: 24rpx;
	margin-bottom: 24rpx;
	overflow: hidden;
	box-shadow: 0 8rpx 40rpx rgba(0, 0, 0, 0.08);
	transition: all 0.3s ease;
}

.record-card:active {
	transform: translateY(4rpx);
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
}

.record-cover {
	position: relative;
	height: 320rpx;
	overflow: hidden;
}

.cover-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cover-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.6) 100%);
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	padding: 24rpx;
}

.status-badge {
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(10rpx);
	padding: 8rpx 16rpx;
	border-radius: 20rpx;
	font-size: 22rpx;
	font-weight: 500;
	color: #666;
}

.status-pending {
	background: rgba(255, 149, 0, 0.9);
	color: #fff;
}

.status-approved {
	background: rgba(52, 199, 89, 0.9);
	color: #fff;
}

.status-rejected {
	background: rgba(255, 59, 48, 0.9);
	color: #fff;
}

.status-cancelled {
	background: rgba(142, 142, 147, 0.9);
	color: #fff;
}

.price-tag {
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(10rpx);
	padding: 8rpx 16rpx;
	border-radius: 20rpx;
	display: flex;
	align-items: baseline;
}

.price-symbol {
	font-size: 20rpx;
	color: #ff6b35;
	font-weight: 500;
}

.price-value {
	font-size: 28rpx;
	color: #ff6b35;
	font-weight: 700;
	margin-left: 2rpx;
}

.record-content {
	padding: 24rpx;
}

.content-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 20rpx;
}

.activity-title {
	font-size: 32rpx;
	font-weight: 600;
	color: #1a1a1a;
	line-height: 1.4;
	flex: 1;
	margin-right: 20rpx;
}

.organizer-info {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}

.organizer-label {
	font-size: 22rpx;
	color: #999;
	margin-bottom: 8rpx;
}

.organizer-avatars {
	display: flex;
	gap: -8rpx;
}

.organizer-avatar {
	width: 40rpx;
	height: 40rpx;
	border-radius: 50%;
	border: 3rpx solid #fff;
	margin-left: -8rpx;
}

.organizer-avatar:first-child {
	margin-left: 0;
}

.activity-meta {
	margin-bottom: 20rpx;
}

.meta-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12rpx;
}

.meta-row:last-child {
	margin-bottom: 0;
}

.meta-item {
	display: flex;
	align-items: center;
	flex: 1;
}

.meta-icon {
	font-size: 24rpx;
	margin-right: 8rpx;
}

.meta-text {
	font-size: 26rpx;
	color: #666;
}

.participant-count {
	font-size: 24rpx;
	color: #ff6b35;
	font-weight: 600;
}

.count-text {
	color: #ff6b35;
}

.time-info {
	font-size: 24rpx;
	color: #667eea;
	font-weight: 600;
}

.time-text {
	color: #667eea;
}

.record-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 16rpx;
	border-top: 1rpx solid #f5f5f5;
}

.join-info {
	display: flex;
	align-items: center;
}

.join-label {
	font-size: 22rpx;
	color: #999;
}

.join-time {
	font-size: 22rpx;
	color: #666;
	margin-left: 4rpx;
}

.action-buttons {
	display: flex;
	gap: 12rpx;
}

.action-btn {
	padding: 8rpx 20rpx;
	font-size: 24rpx;
	border-radius: 20rpx;
	border: none;
	line-height: 1.2;
	font-weight: 500;
}



.detail-btn {
	background: #667eea;
	color: #fff;
}

/* 空状态样式 */
.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 120rpx 30rpx;
	text-align: center;
}

.empty-icon {
	width: 160rpx;
	height: 160rpx;
	margin-bottom: 40rpx;
	opacity: 0.6;
}

.empty-text {
	font-size: 32rpx;
	color: #666;
	margin-bottom: 16rpx;
	font-weight: 500;
}

.empty-tip {
	font-size: 26rpx;
	color: #999;
}

/* 加载状态样式 */
.loading-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 60rpx;
}

.loading-spinner {
	width: 60rpx;
	height: 60rpx;
	border: 6rpx solid #f3f3f3;
	border-top: 6rpx solid #667eea;
	border-radius: 50%;
	animation: spin 1s linear infinite;
	margin-bottom: 20rpx;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.loading-text {
	font-size: 26rpx;
	color: #999;
}

.load-more {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 40rpx;
}

.load-more-text {
	font-size: 26rpx;
	color: #999;
}

.no-more {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 40rpx;
	gap: 20rpx;
}

.no-more-line {
	flex: 1;
	height: 1rpx;
	background: #e0e0e0;
}

.no-more-text {
	font-size: 24rpx;
	color: #ccc;
	padding: 0 20rpx;
}



@keyframes slideUp {
	from {
		transform: translateY(100%);
	}
	to {
		transform: translateY(0);
	}
}





</style>
